<template>
	<view class="order-item" @click="navtoDetail">
		<view class="pay_tag" :class="info.is_pay==0?'':'is_pay'">
			{{info.is_pay==0?'等报价':'已缴押金'}}
		</view>
		<view class="u-flex u-col-top">
			<view class="u-flex-1 w-0">
				<view class="font-medium u-font-36 u-line-1">{{info.title }}</view>
			</view>
			<view class="u-type-error font-medium" style=" text-align: right;">
				<text>￥</text><text class="u-font-36">{{info.price}}</text>
			</view>
		</view>
		<view class="u-m-t-20 u-flex">
			<view class="u-m-r-20 u-m-b-20">
				<u-tag :text="info.class_one_name" type="info" border-color="transparent" />
			</view>
			<!-- <view class="u-m-r-20 u-m-b-20">
				<u-tag :text="info.class_two_name" type="info" border-color="transparent" />
			</view> -->
			<view class="u-m-r-20 u-m-b-20">
				<u-tag :text="info.exp_name" type="info" border-color="transparent" />
			</view>
		</view>
		<view class="u-m-b-20 u-flex u-flex-center">
			<view class="u-flex-1">
				<text class="iconfont icon-dingwei u-font-12 u-m-r-10" style="color: #CCCCCC;"></text>
				<text class="u-light-color u-m-r-30 u-font-22">{{address}}</text>
				<text class="u-light-color u-font-22">{{info.distance}}</text>
			</view>
			<u-button :type="(info.status==0||info.status==3)? 'default':'primary'" size="mini" shape="circle"
								hover-class="none" @click="toOrder">
								去接单
							</u-button>
		</view>
		<view class="u-flex u-col-center">
			<view class="mini-avatar"><u-avatar :src="info.userInfo.avatar" size="80" level-size="20"
					:show-level="!!info.userInfo.is_power" :level-bg-color="config.mainColor"></u-avatar></view>
			<view class="u-flex-1">
				<view class="font-medium ">{{info.userInfo.name}}</view>
				<text class="u-light-color">{{info.add_time}}</text>
				<text class="u-light-color u-m-l-10">IP:{{info.userInfo.login_city || '未知'}}</text>
				
			</view>
			<view class="">
				
				<view class="u-text-center u-font-22 u-light-color" v-if="info.apply_num>0">
					{{info.apply_num}}人已申请
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		name: "bb-demand",
		props: {
			info: {
				type: Object,
				default: () => ({})
			},
			isWebview: {
				type: Boolean,
				default: false
			}
		},
		computed: {
			address() {
				const {
					city
				} = this.$store.state.vuex_address;
				const thisCity = this.info.address.split(',')[1];
				if (city === thisCity) {
					return this.info.area
				} else {
					return this.info.address
				}
			}
		},
		data() {
			return {
				config: this.$appConfig
			};
		},
		methods: {
			navtoDetail() {
				this.$u.route('/pages/subpage/list/dem_detail', {
					id: this.info.id
				})
			},
			toOrder() {
				const userinfo = this.$store.state.vuex_userInfo;
				if (!userinfo) {
					this.$u.route('/pages/subpage/login/oneBtnLogin')
					return
				}
				if (userinfo.is_real) {
					if (this.info.status == 2) {
						this.$u.route('/pages/subpage/order/action_dem', {
							id: this.info.id
						})
					} else if (this.info.status == 0) {
						this.$u.toast('需求已关闭，看看其他需求吧！')
						setTimeout(() => {
							this.$emit('change')
						}, 1000)

					} else {
						this.$u.toast('手慢了哦，需求已被接单了！')
						setTimeout(() => {
							this.$emit('change')
						}, 1000)
					}

				} else {
					uni.showModal({
						content: '接单需要您完成实名认证！',
						confirmText: '去认证',
						confirmColor: this.$appConfig.mainColor,
						success: (res) => {
							if (res.confirm) {
								this.$u.route('/pages/subpage/profile/autonym')
							}
						}
					})
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	.order-item {
		position: relative;
		background-color: #FFFFFF;
		padding: 30rpx;
		border-radius: 20rpx;
		margin-bottom: 30rpx;
		overflow: hidden;
	}

	.mini-avatar {
		transform: scale(0.7);
	}
	
	.pay_tag{
		position: absolute;
		left: 0;
		top: 0;
		background: linear-gradient( 93deg, #59C173 32%, #1ED996 100%);
		line-height: 38rpx;
		padding: 0 20rpx;
		border-bottom-right-radius:20rpx ;
		color: #FFFFFF;
		font-size: 20rpx;
		
		&.is_pay{
			background: linear-gradient( 93deg, #FF4026 32%, #FF7144 100%);
		}
	}
</style>